<template>
	<view class="tabbar">
		<view class="tabbar-item" :class="{ 'tabbar-item-a' : curren === 0 }"
			@click="handJump('/pages/tabbar/home/index')">
			<image v-if="curren === 0" src="../../static/tabbar/home-a.png" mode=""></image>
			<image v-else src="../../static/tabbar/home.png" mode=""></image>
			<text class="name">首页</text>
		</view>
		<view class="tabbar-item" :class="{ 'tabbar-item-a' : curren === 1 }"
			@click="handJump('/pages/tabbar/hire/index')">
			<image v-if="curren === 1" src="../../static/tabbar/hire-a.png" mode=""></image>
			<image v-else src="../../static/tabbar/hire.png" mode=""></image>
			<text class="name">租车</text>
		</view>
		<view class="midden">
			<view class="midden-img" @click="handReleate">
				<image src="../../static/tabbar/tabbarset.png" mode=""></image>
			</view>
		</view>
		<view class="tabbar-item" :class="{ 'tabbar-item-a' : curren === 2 }"
			@click="handJump('/pages/tabbar/order/index')">
			<image v-if="curren === 2" src="../../static/tabbar/order-a.png" mode=""></image>
			<image v-else src="../../static/tabbar/order.png" mode=""></image>
			<text class="name">订单</text>
		</view>
		<view class="tabbar-item" :class="{ 'tabbar-item-a' : curren === 3 }"
			@click="handJump('/pages/tabbar/my/index')">
			<image v-if="curren === 3" src="../../static/tabbar/my-a.png" mode=""></image>
			<image v-else src="../../static/tabbar/my.png" mode=""></image>
			<text class="name">我的</text>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue'
	import {
		useAppsStore
	} from '@/stores/modules/app.js'
	import {
		storeToRefs
	} from 'pinia'
	const useStore = useAppsStore()
	const {
		getUserInfo: userInfo
	} = storeToRefs(useStore)
	defineProps({
		curren: {
			type: Number,
			default: 0
		}
	})

	const handJump = (url) => {
		uni.switchTab({
			url
		})
	}

	const handReleate = async () => {
		await handUser()
		uni.navigateTo({
			url: '/pagesA/releate/index'
		})
	}

	const handUser = () => {
		return new Promise((rel, rej) => {
			if (userInfo.value?.id) {
				return rel(true)
			}
			uni.navigateTo({
				url: '/pagesA/login/login'
			})
			rej('请先登录')
		})
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		position: fixed;
		bottom: 0;
		z-index: 10;
		width: 750rpx;
		box-sizing: border-box;
		padding: 15rpx 8rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding-bottom: 20rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);

		&-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 3;

			image {
				width: 48rpx;
				height: 48rpx;
				display: block;
			}

			text {
				margin-top: 8rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		}

		.midden {
			width: 150rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			&-img {
				image {
					width: 155rpx;
					height: 120rpx;
				}

				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 20rpx;
				bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
				bottom: calc(env(safe-area-inset-bottom) + 20rpx);
			}
		}
	}
</style>